<template>
  <div class="container">
    <el-form :inline="true" :model="filterData" class="search">
      <el-form-item>
        <el-button :icon="Search" @click="initList()" />
      </el-form-item>
    </el-form>
    <div class="table-contain">
      <Table
        ref="tableRef"
        height="100%"
        row-key="id"
        :columns="tableData.columns"
        v-loading="tableData.loading"
        :data="tableData.data"
      >
        
      </Table>
    </div>
    <Page
      :page-data="pageData"
      :total="tableData.total"
      @page-no-change="(pageNum) => (pageData.pageNum = pageNum)"
      @page-size-change="(pageSize) => (pageData.pageSize = pageSize)"
    />

  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, watch } from "vue";
import Table from "@/components/pageTable/table";
import { ElMessage, ElMessageBox } from "element-plus";

import {
  Search,
} from "@element-plus/icons-vue";
import Page from "@/components/pageTable/Page.vue";
import { auditList } from "@/api/system";

let filterData = reactive({ name: "" });
const tableRef = ref();
const pageData = reactive({
  pageSize: 15,
  pageNum: 1,
});

const searchWords = reactive({

});
const tableData = reactive({
  columns: [
    { label: "审核状态", prop: "notifyState", width: 100 },
    { label: "标题", prop: "sendTitle", width: 180 },
    { label: "消息内容", prop: "notifyContent", width: 280, },
    { label: "接收人", prop: "userName", width: 100 },
    { label: "消息状态", prop: "sendState", width: 140,  },
    { label: "备注", prop: "remark", width: 200, },
    { label: "辖区", prop: "jurisdictionalName", width: 100 },
    { label: "消息发送时间", prop: "sendTime", width: 160 },
  ],
  loading: false,
  total: 0,
  data: [],
});

async function initList(page: number) {
  pageData.pageNum = page || 1;
  let params = {
    pageNum: pageData.pageNum || 1,
    pageSize: pageData.pageSize,
    ...searchWords,
  };
  tableData.loading = true;
  const { data, msg, success } = await auditList(params);
  if (!success) {
    ElMessage.error(msg);
    tableData.loading = false;
    return;
  }
  tableData.loading = false;
  tableData.data = data?.list;
  tableData.total = data?.total;
}

onMounted(async () => {
  await initList(pageData.pageNum);
});

watch(pageData, async () => {
  await initList(pageData.pageNum);
});
watch(searchWords, async () => {
  await initList(1);
});
</script>

<style scoped lang="scss">
@import "@/assets/styles/common";
</style>
